/**
 * 封装筛选组件
 * 1.封装表格的筛选组件融入表格的内容
 * 2.筛选项的封装需要封装成动态的以便多种不同环境下使用
 * 3.筛选组件右下角的提交/重置按钮动态控制
 */
import React,{useState} from "react"
import {Input,Button,Space} from "antd"
/**
 * 比如我想要有关键字，标签，创建时间的筛选选项
 * 如果传递过来代表关键字，标签，创建时间的筛选项;
 * 就展示这一项，如果说没有传递，那就不展示
 * 假如传递onSearch这个搜索方法，就展示提交按钮
 * 假如传递onReset这个重置方法，就展示重置按钮
 */
function TableFilter({
    showKeywordFilter = false,
    showTagFilter = false,
    showCreateTimeFilter = false,
    onSearch,
    onReset
}){
   //可以创建一些筛选条件的状态;
   const [keyword,setKeyword] = useState<any>(null)
   const [tag,setTag] = useState<any>(null)
   const [createTime,setCreateTime] = useState<any>("")
   const handleSearch = ()=>{
       if(onSearch){
         onSearch({keyword,tag,createTime})
       }
   }
   const handleReset = ()=>{
       setKeyword(null)
       setTag(null)
       setCreateTime("")
       if(onReset){
        onReset()
       }
   }
   return (
     <div style={{
        background:'pink',
        padding:'16px',
        marginBottom:'16px',
        borderRadius:'6px'
     }}>
        <Space>
           {
            showKeywordFilter && (
                <Input placeholder="请输入关键字" value={keyword} onChange={(e)=>setKeyword(e.target.value)} />
            )
            // showCreateTimeFilter?(
            //   <Input placeholder="请输入创建时间" value={createTime} onChange={(e)=>setCreateTime(e.target.value)} />
            // ):null
           }
           {
            showTagFilter && (
                <Input placeholder="请输入标签" value={tag} onChange={(e)=>setTag(e.target.value)} />
            )
           }
           {
            showCreateTimeFilter && (
                <Input placeholder="请选择创建时间" value={createTime} onChange={(e)=>setCreateTime(e.target.value)} />
            )
           }
           {
             onSearch && (
                <Button type="primary" onClick={handleSearch}>
                    搜索
                </Button>
             )
           }
           {
             onReset && (
                <Button onClick={handleReset}>
                    重置
                </Button>
             )
           }
        </Space>
     </div>
   )
}
export default TableFilter
